<div class="row">

    <!--消息查询 -->
    <div class="col-lg-12">
        <div class="panel panel-success" id="message-query-tab" data-type="topic" data-value="" data-namesvr="">
            <div class="panel-heading">
                <i class="glyphicon glyphicon-th-list"></i> 消息查询
            </div>
            <div class="panel-body">
                <div>
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#msg_query_tab_topic"
                                              data-type="topic"><h3><span
                                class="label label-Primary">Topic 查询</span></h3></a></li>
                        <li><a href="#msg_query_tab_msgid"
                               data-type="msgid"><h3><span
                                class="label label-Default">Message ID 查询</span></h3></a></li>

                        <li><a href="#msg_query_tab_msgkey"
                               data-type="msgkey"><h3><span
                                class="label label-Default">Message Key 查询</span></h3></a></li>
                    </ul>
                </div>
                <div class="tab-content" style="padding: 15px 15px;">
                    <div class="tab-pane active" id="msg_query_tab_topic">
                        <div class="form-inline panel-body form-group">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <button type="button" id="msg-query-btn-topic" data-value=""
                                            class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                            aria-expanded="false">选择Topic <span class="caret"></span></button>
                                    <ul class="dropdown-menu">

                                        {% for k,v in  topics.items %}
                                            <li><a href="#" data-value="{{ k }}" data-namesvr="{{ v }}"
                                                   onclick="setMsgQuerySelectValue(this,'msg-query-btn-topic')">{{ k }} </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" onclick="queryMsgs()">查询</button>
                        </div>
                    </div>


                    <div class="tab-pane" id="msg_query_tab_msgid">
                        <div class="form-inline panel-body form-group">
                            <div class="input-group">
                                <span class="input-group-addon">Message ID   </span>
                                <input id="message-query-input-id" type="text" class="form-control" size="60"
                                       placeholder="Message ID ">

                            </div>
                            <button type="button" class="btn btn-primary" onclick="queryMsgById()">查询</button>
                        </div>
                    </div>


                    <div class="tab-pane" id="msg_query_tab_msgkey">
                        <div class="form-inline panel-body form-group">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <button type="button" id="msg-query-btn-key"
                                            class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                            aria-expanded="false">选择Topic <span class="caret"></span></button>
                                    <ul class="dropdown-menu" role="menu">

                                        {% for k,v in  topics.items %}
                                            <li><a href="#" data-value="{{ k }}" data-namesvr="{{ v }}"
                                                   onclick="setMsgQuerySelectValue(this,'msg-query-btn-key')">{{ k }} </a>
                                            </li>
                                        {% endfor %}

                                    </ul>
                                </div>

                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">Message Key  </span>
                                <input id="message-query-input-key" type="text" class="form-control" size="60"
                                       placeholder="Message Key ">

                            </div>
                            <button type="button" class="btn btn-primary" onclick="queryMsgs()">查询</button>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        <div id="query-message-results" style="display:none">
            <table id="datatable" class="table table-hover" width="100%">
                <thead>
                <tr>
                    <th style="width:400px">Message ID</th>
                    <th>Tag</th>
                    <th>Key</th>
                    <th style="width:200px">Storetime</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="query-message-results-body">
                <tr>
                    <td><span title="0A91883300001F9000000000D16C742D">0A91883300001F9000000000D16C742D</span></td>
                    <td>Test</td>
                    <td>aaaaaaaaaaaaa</td>
                    <td width="120">2015-03-31 12:10:19</td>
                    <td><a href=" " class="J_view" msgid="0A91883300001F9000000000D16C742D">查看详情</a></td>
                </tr>
                <tr>
                    <td><span title="0A91883300001F9000000000D1291E47">0A91883300001F9000000000D1291E47</span></td>
                    <td>Test</td>
                    <td>aaaaaaaaaaaaa</td>
                    <td width="120">2015-03-31 10:21:42</td>
                    <td><a href="" class="J_view" msgid="0A91883300001F9000000000D1291E47">查看详情</a></td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>

<script>
    $('#message-query-tab').find('a').click(function (e) {
        e.preventDefault()
        $('#message-query-tab').attr('data-type', $(this).attr('data-type'));
        $('#message-query-tab').attr('data-namesvr', $(this).attr('data-namesvr'));
        $('#message-query-tab').attr('data-value', $(this).attr('data-value'));

        $(this).find("h3 span").removeClass("label-Default").addClass("label-Primary");
        $(this).parent().siblings().find("a h3 span").removeClass("label-Primary").addClass("label-Default");
        $(this).tab('show');
    })
</script>

<!-- Modal -->
<div class="modal fade" id="msg-content-model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">消息详情</h4>
            </div>
            <div class="modal-body" id="msg-content-model-body">
            </div>

        </div>
    </div>
</div>